<template>
	<view class="content">
		<!-- 管理购物车模块 -->
		<!-- <view class="manage">
			管理模块
		</view> -->
		<!-- 购物车滚动模块 -->
		<scroll-view scroll-y :style="{'height': (screenHeight-'100')+'px'}" @scrolltolower="scrolltolower">
			<checkbox-group @change="checkboxChange">
				<view class="y-list-item" v-for="(item,index) in goods" :key="index">
					<u-row justify="space-between" gutter="10">
						<u-col span="1">
							<view class="check">
								<checkbox :value="item.id" :checked="checkboxValue.includes(item.id)" />
							</view>
						</u-col>
						<u-col span="11">
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="3">
									<u-image :src="item.imageUrl" width="80px" height="80px"></u-image>
								</u-col>
								<u-col span="6">
									<u--text :text="item.name" bold></u--text>
									<u--text :lines="3" text="商品参数"></u--text>
									<view class="flex">
										<u--text mode="price" decoration="line-through" :text="item.priceHis"></u--text>
										<u--text mode="price" color="#ff0000" bold :text="item.priceNew"></u--text>
									</view>
								</u-col>
								<u-col span="3">
									<u-tag :text="item.post?'包邮':'自费'" plain size="mini" type="warning"></u-tag>
									<u-number-box v-model="value" @change="valChange"></u-number-box>
								</u-col>
							</u-row>
						</u-col>
						<!-- <u-col span="3"></u-col>
						<u-col span="3"></u-col> -->
					</u-row>
				</view>
			</checkbox-group>
		</scroll-view>
		<!-- 吸底工具栏 -->
		<view class="base">
			<u-row justify="space-between" gutter="10">
				<u-col span="3">
					<checkbox-group @change="allChoose">
						<label>
							<checkbox value="1" :checked="allChecked?true:false"></checkbox><span
								style="margin-right: 10rpx;">全选 </span>
						</label>
					</checkbox-group>
				</u-col>
				<u-col span="2">
					<u--text text="合计"></u--text>
				</u-col>
				<u-col span="3">
					<u--text mode="price" text="728732.32"></u--text>
				</u-col>
				<u-col span="3">
					<u-button text="去支付"></u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const screenHeight = ref(0)
	uni.getSystemInfo({
		success: (res) => {
			// const screenWidth = res.windowWidth; // 屏幕宽度，单位为px
			screenHeight.value = res.windowHeight; // 屏幕高度，单位为px
			// console.log('屏幕宽度：', screenWidth);
			console.log('屏幕高度：', screenHeight);
		},
	});
	const from = ref({
		pageNo: 1,
		pageSize: 10
	})
	// 基本案列数据
	const goods = ref([{
		id: '0',
		imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		post: 1,
		selected: false
	}, {
		id: '1',
		imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		post: 0,
		selected: false
	}, {
		id: '2',
		imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		post: 0,
		selected: false
	}])
	const checkboxValue = ref([]) //多选框值
	const allChecked = ref(false) //是否全选
	const scrolltolower = () => {
		from.value.pageNo++
		console.log("底部触发加载更多---", from.value);
	}
	const checkboxChange = (item) => {
		checkboxValue.value = item.detail.value
		if (checkboxValue.value.length > 0 && checkboxValue.value.length == goods.value
			.length) { //判断选中长度和你的内容长度是否一致，如果一致更改全选状态
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
		console.log(item.detail.value);
	}
	// 全选事件
	const allChoose = (item) => {
		let choose = item.detail.value;
		console.log(choose, item);
		// 全选
		if (choose[0] == '1') {
			allChecked.value = true;
			goods.value.forEach((item) => {
				// 点击全选遍历数组把全选的值给小选，这样就能实现全选按钮
				checkboxValue.value.push(item.id)
			});
		} else {
			// 取消全选
			allChecked.value = false;
			checkboxValue.value = [];
		}
	}
</script>

<style lang="scss" scoped>
	// 滚动容器

	.scroll-view {
		flex: 1;
	}

	.flex {
		display: flex;
	}

	// 底部占位空盒子
	.toolbar-height {
		height: 100rpx;
	}
</style>